<template>
    <div class="featurelist_body">
        <div class="featurelist_nav">
            <div class="one_nav" @click="click_nav(data)" v-for="(data, index) in featurelist_nav" :key="index">
                <div v-if="select_id !== data.id" class="not_one_nav"> {{ data.nav_name }}</div>
                <div v-else class="click_one_nav"> {{ data.nav_name }}</div>
            </div>
        </div>
        <div class="featurelist_module">

        </div>
    </div>
</template>
<script setup name="featurelist_body">
import { ref, watchEffect } from 'vue'
const select_id = ref(1)
const featurelist_nav = ref([
    {
        nav_name: 'OA审批',
        nav_icon: '',
        id: 1,
    },
    {
        nav_name: '图纸管理',
        nav_icon: '',
        id: 2,
    },
    {
        nav_name: '人员管理',
        nav_icon: '',
        id: 3,
    },
])

function click_nav(data) {
    select_id.value = data.id
}
</script>
<style scoped lang="scss">
.featurelist_body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .featurelist_nav {
        width: 110px;
        height: 100%;
        position: relative;
        background: #eee;

        .one_nav {
            width: 100%;
            height: 50px;
            font-size: 14px;
            box-sizing: border-box;
            padding: 0 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            border-bottom: 1px solid #fff;
        }

        .not_one_nav {
            background: #ffff;
        }

        .click_one_nav {
            top: 0;
            left: 0;
            width: 125px;
            height: 50px;
            display: flex;
            justify-content: center;
               box-sizing: border-box;
            padding-left: 5px;
            padding-right: 20px;
            align-items: center;
            position: absolute;
            background: #ffff;
        }
    }

    .featurelist_module {
        width: calc(100% - 110px);
        height: 100%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) inset;
    }
}
</style>